<template>
  <div>
    <div class="diary-list" v-for="(item, index) in diary_list" :key="index">
      <div class="diary-time">
        <span class="diary-time-day">{{ item.create_time.day }}</span>
        <span class="diary-time-year-month"
          >{{ item.create_time.month }}月/{{
            item.create_time.year
          }}年·日寄</span
        >
        <div class="diary-operation">
          <div
            class="iconfont icon-gengduo"
            @click="can_show_popup($Event, item.id)"
          ></div>
        </div>
      </div>
      <div class="diary-title">{{ item.title }}</div>
      <div class="diary-content">{{ item.content_text }}</div>
      <div class="diary-img-list">
        <div
          :class="['diary-img-item-' + item.img_list.length]"
          v-for="(img_item, img_index) in item.img_list"
          :key="img_index"
        >
          <img class="diary-img-item" :src="img_item.diary_img" />
        </div>
      </div>
    </div>
    <popup
      :is_popup="is_popup"
      :popup_floor="5"
      @em_show_popup="can_show_popup"
    >
      <div class="diary-operation-option" @click="on_to_edit">
        <div class="iconfont icon-bianji"></div>
        <span>编辑</span>
        <div class="to-iconfont iconfont icon-right"></div>
      </div>
      <div class="diary-operation-option" @click="on_delete_diary">
        <div class="iconfont icon-shanchu"></div>
        <span>删除</span>
        <div class="to-iconfont iconfont icon-right"></div>
      </div>
      <div class="diary-operation-close" @click="can_show_popup">取消</div>
    </popup>
  </div>
</template>
<script setup >
import axios from "../../utils/request";
import { ref, onMounted, reactive } from "vue";
import popup from "../../components/popup.vue";
import { useRouter } from "vue-router";
const router = useRouter();
let diary_list = reactive([]);
let is_popup = ref(false);
let sel_diary_id = "";
onMounted(async () => {
  const response = await axios({
    method: "get",
    url: "/edit/get",
  });
  if (response.code == 200) {
    diary_list.push(...response.data);
  }
});

const on_to_edit = () => {
  router.push({
    path: "/edit",
    query: {
      diary_id: sel_diary_id,
    },
  });
};

const can_show_popup = (e, diary_id) => {
  is_popup.value = !is_popup.value;
  if (diary_id) {
    sel_diary_id = diary_id;
  }
};

const on_delete_diary = async () => {
  try {
    const response = await axios({
      method: "post",
      url: "/edit/delete",
      data: {
        diary_id: sel_diary_id,
      },
    });
    console.log(response);
  } catch (e) {
    console.log(e);
  }
};
</script>

<style lang="scss" scoped>
@import "./diary-list.scss";
</style>
